<!DOCTYPE html>
<title>Tests the labels shown when partial information is provided.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<video controls>
  <track kind="subtitles" src="captions.vtt" srclang="is" label="Icelandic">
  <track kind="subtitles" src="captions-fast.vtt" srclang="fr" label="">
  <track kind="subtitles" src="captions-rtl.vtt" srclang="" label="">
</video>
<script>
async_test(function(t) {
    var video = document.querySelector("video");
    enableTestMode(video);

    video.oncanplaythrough = t.step_func(function() {
      clickCaptionButton(video, t.step_func_done(function() {
        // Get the menu that displays the list of text tracks.
        var captionsList = mediaControlsElement(internals.shadowRoot(video).firstChild,
            "-internal-media-controls-text-track-list");

        assert_equals(captionsList.children[0].innerText, "Options");
        assert_equals(captionsList.children[1].innerText, "Off");
        assert_equals(captionsList.children[2].innerText, "Icelandic");
        assert_equals(captionsList.children[3].innerText, "fr");
        assert_equals(captionsList.children[4].innerText, "Track 3");
      }));
    });

    video.src = "content/counting.ogv";
});
</script>
